<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    *{margin: 0; padding: 0;}
    #dv{
        height: 100px;
        width: 100px;
        background-color: aqua;
        position: absolute;
    }
    #btn{
        position: relative;
        top: 200px;
    }
    #btn2{
        position: relative;
        top: 200px;
        left: 200px;
    }
</style>
</head>
<body>
    <div id="dv"></div>
    <button id='btn'> 点击出发 </button>
    <button id="btn2">点击回来</button>
</body>
</html>

<script>
    var dv = document.querySelector('#dv')
    var btn = document.querySelector('#btn')
    var btn2 = document.querySelector('#btn2')
    function animation(el,target) {
        var leader = el.offsetLeft
        var step = 10.123
        //如果终点位置在起点之前，应该让元素向后移动，step需要取反
        step = leader < target ? step:-step       
        var goAhead = setInterval(function(){
            //在剩下的距离不足step移动一次时，直接移动剩余的距离
            if (Math.abs(leader - target) < Math.abs(step)) {
                el.style.left = target + 'px'
                clearInterval(goAhead)
                return
            }
            //动画基础原理，间歇定时器中让leader = leader + step即可实现动画效果
            leader += step 
            el.style.left = leader + 'px'
        },15)

    }
    
    btn.onclick = function(){
        animation(dv,200)
    }
    
    btn2.onclick = function(){
        animation(dv,40)
    }
</script>

<!-- 重点：
1.  应该掌握封装后的复用性，比如此案列中封装的函数传入了调用元素，后期如果哪个元素需要调用该动画，直接传入对应变量即可。

2.  应该优化所有可能出现的问题，该案列的反向移动，step小数时产生的无限位移等情况都是需要提前优化的点 -->